<template>
  <view
    class="w100 bg-gray flex-sub padding-lr padding-top flex-center flex-direction"
  >
    <!-- <view class="bg-white w100 padding-lr">
      <u-form-item
        label="开始"
        borderBottom
        @click="
          showDatePicker = true;
          hideKeyboard();
        "
      >
        <u--input
          v-model="start"
          disabled
          disabledColor="#ffffff"
          placeholder="请选择生日"
          border="none"
        ></u--input>
        <u-icon slot="right" name="arrow-right"></u-icon>
      </u-form-item>
      <u-form-item
        label="结束"
        borderBottom
        @click="
          showDatePicker = true;
          hideKeyboard();
        "
      >
        <u--input
          v-model="end"
          disabled
          disabledColor="#ffffff"
          placeholder="请选择生日"
          border="none"
        ></u--input>
        <u-icon slot="right" name="arrow-right"></u-icon>
      </u-form-item>

      <u-datetime-picker
        :show="showDatePicker"
        :value="birthday"
        mode="date"
        closeOnClickOverlay
        @confirm="birthdayConfirm"
        @cancel="birthdayClose"
        @close="birthdayClose"
      ></u-datetime-picker>
    </view> -->

    <u-search
      class="bg-white flex-0 w100 padding"
      shape="square"
      placeholder="输入账户名称"
      v-model="keyword"
      @custom="queryList(1)"
      @search="queryList(1)"
    ></u-search>
  <!--  <view class="bg-white flex-0 w100 padding">
      <view class="text-sm" style="background-color: #f56c6c;text-align: center;padding: 5px 5px;margin: 0 auto;border-radius: 3px;color: #fff;" @click="productClick">
        {{product_name}}
      </view>
    </view>-->
    <view style="margin-bottom: -30px" class="bg-white w100 padding-lr text-sm">
      <u-cell :border="false">
        <view class="text-df text-bold" slot="title">账户列表</view>
        <view class="text-grey text-sm" slot="value">总计{{ total }}</view>
      </u-cell>
      <Detail :showDetail.sync="showDetail" :info="this.currentInfo"></Detail>
    </view>
    <z-paging
      class="flex-sub padding-lr bg-white"
      ref="paging"
      :default-page-size="limit"
      v-model="accountList"
      :refresher-enabled="true"
      :auto-clean-list-when-reload="false"
      :auto-scroll-to-top-when-reload="true"
      :show-default-loading-more-text="true"
      loading-more-no-more-text="没有更多了"
      :fixed="false"
      :pagingStyle="{
        height: `calc( 100vh - ${statusBarHeight + tabHeight}px )`,
      }"
      @query="queryList"
    >
      <view
        class="rcl-notice__item"
        v-for="(item, index) in accountList"
        :key="index"
        @click="accountClick(index)"
      >
        <u-cell-group>
          <u-cell :border="false">
            <view class="flex text-cut" slot="title"
              ><u-tag text="巨量" size="mini" type="primary" />
              <view
                style="width: 100px"
                class="flex-sub text-cut margin-left-xs text-bold"
              >
                {{ item.name }}
              </view>
            </view>
            <view class="text-sm flex margin-top justify-between" slot="label">
              <view class="flex-col">
                <view>总消耗</view>
                <view>{{ item.cost }}</view>
              </view>
              <view class="flex-col align-center">
                <view>成交金额</view>
                <view>{{ item.sale }}</view>
              </view>
              <view class="flex-col align-center">
                <view>有效roi</view>
                <view>{{ item.effective_roi }}</view>
              </view>
              <view class="flex-col align-end">
                <view>成交ROI</view>
                <view>{{ item.ROI }}</view>
              </view>
            </view>
          </u-cell>
          <u-cell
            style="margin-top: -10px"
            :border="false"
            :value="isAdmin ? item.company_account : '查看详情'"
            :right-icon="isAdmin ? '' : 'arrow-right'"
            :isLink="true"
            :disabled="true"
            arrow-direction="right"
          >
            <view class="flex text-sm text-cut" slot="title">
              {{ item.pid_account }}
            </view>
          </u-cell>
        </u-cell-group>
      </view>
    </z-paging>
   <!--<view>
     <u-picker
             keyName="name"
             :show="showProduct"
             :columns="columnProduct"
             closeOnClickOverlay
             @close="showProduct = false"
             @cancel="showProduct = false"
             @confirm="handleProduct"
     ></u-picker>
   </view>-->
  </view>
</template>

<script>
import dayjs from "dayjs";
import { accountList,getProductList} from "@/api";
import Detail from "./detail.vue";
import { mapGetters } from "vuex";
export default {
  components: { Detail },
  data() {
    return {
      showDetail: false,
      currentInfo: {},
      total: 0,
      start: "2022-01-01",
      end: "2024-01-01",
      // showDatePicker: false,
      // birthday: "",
      page: 1,
      limit: 10,
      keyword: "",
      statusBarHeight: 10,
      tabHeight: 0,
      accountList: [],
        showProduct:false,
        product_id:0,
        product_name:"全部产品",
        columnProduct:[],
    };
  },
  onLoad() {},
  computed: {
    ...mapGetters(["isAdmin", "curProStatus"]),
  },
  methods: {
      handleProduct(val){
          this.product_id=val.value[0].id;
          this.product_name=val.value[0].name;
          this.showProduct=false;
          this.queryList(1)
      },
      productClick(){
          this.showProduct=true;
          getProductList({
              page:1,
              page_size:9999
          }).then((r) => {
              let list=[{ id: 0, name: "全部产品" }];
              this.columnProduct=[list.concat(r.data.list)];
              console.log(r);
          }).catch((e) => {
              console.error(e);
          });
      },
    accountClick(idx) {
      if (this.isAdmin) return;
      this.currentInfo = this.accountList[idx];
      this.showDetail = true;
    },
    // birthdayClose() {
    //   this.showDatePicker = false;
    //   this.$refs.form1.validateField("userInfo.birthday");
    // },
    // birthdayConfirm(e) {
    //   this.showDatePicker = false;
    //   this.start = uni.$u.timeFormat(e.value, "yyyy-mm-dd");
    // },
    queryList(pageNo, pageSize) {
      this.page = pageNo;
      this.handleGetList();
    },
    handleGetList() {
        console.log(this.$store.state.product);
        accountList({
        channel: this.isAdmin ? 0 : this.curProStatus == "pdd" ? 1 :this.curProStatus == "jd" ?4: 3,
        product_id:this.$store.state.product.product_id,
        cost_order: 2,
        page: this.page,
        page_size: this.limit,
        start_date: dayjs().format("YYYY-MM-DD"),
        end_date: dayjs().format("YYYY-MM-DD"),
        name: this.keyword,
        keyword: this.keyword,
        note: "",
        son_manager_name: null,
      }).then(({ data }) => {
        this.$refs.paging.complete(data.list);
        this.total = data.total;
      });
    },
    hideKeyboard() {
      uni.hideKeyboard();
    },
  },
};
</script>
<style lang="scss" scoped>
.content {
  height: 100%;
}
</style>
